<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>柱状图</title>
  <style>
    @keyframes donghua {
      from {
        height: 0;
      }
    }

    
    .table {
      display: flex;
      justify-content: space-evenly;
      align-items: flex-end;
      width: 500px;
      height: 300px;
      border-left: 1px solid greenyellow;
      border-bottom: 1px solid greenyellow;
    }

    .first {
      position: relative;
      width: 50px;
      background-color: greenyellow;
      animation: donghua 1s forwards;
    }

    .first span {
      position: absolute;
      top: -20px;
      left: 0;
      width: 50px;
      text-align: center;
    }

    .first p {
      position: absolute;
      bottom: -36px;
      left: 0;
      width: 80px;
      text-align: center;
    }
  </style>
</head>

<body>
  <script>
    let date = [];
    let html = `<div class="table">`;

    for (let i = 1; i <= 4; i++) {
      date[i] = +prompt(`请输入第${i}季度的数据：`);
    }

    for (let i = 1; i <= 4; i++) {
      html += `
            <div class="first" style="height:${date[i]}px;">
                <span>${date[i]}</span>
                <p>第${i}季度</p >
            </div>`;
    }

    html += `</div>`;
    document.write(html);
  </script>
</body>

</html>